<template>
	<!-- 分类选项卡  :style="{ height: fixed ? height + 'px' : 'auto', backgroundColor: isSticky ? '#fff' : '#f6f6f6' }"-->
	<view class="category-tabs-wrap">
		<!-- 吸顶 	:style="{ position: fixed ? 'fixed' : 'static', top: stickyTop + 'px', left: left + 'px', width: width == 'auto' ? 'auto' : width + 'px', zIndex: 9999999999 }"
		-->
		<view class="u-sticky-wrap" :class="[elClass]">
			<view class="u-sticky">
				<view class="tabs-wrap u-p-y-20"
					:style="isSticky ? 'border-bottom:1px solid #eee;background-color:#fff' : ''">
					<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation
						:scroll-left="scrollLeft">
						<view class="u-flex u-row-cetner u-flex-1 u-col-center">
							<view class="tab-item u-flex-col u-col-center u-row-center"
								v-for="(item, index) in tabsList" :key="index" @tap="tabChange(index)">
								<view class="tab-title u-m-y-6" :class="{ 'title-active': tabCur == index }">
									{{ item.name }}</view>
								<view class="tab-des" :class="{ 'des-active': tabCur == index }">{{ item.description }}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 瀑布流 -->
		<!-- 商帮页 -->
		<view class="u-waterfall u-p-20 u-flex u-flex-col" style="flex-direction: column" v-if="styleType == 1">
<!--			<view id="u-left-column" class="u-column" style="width: 48%;">-->
<!--				<view class="goods-item u-m-b-16 u-m-r-16 u-flex u-row-center u-col-center" v-for="item in leftList"-->
<!--					:key="item.id">-->
<!--					<sh-goods-card class="width-100" :detail="item" :type="item.activity_type || ''"-->
<!--						:image="item.shop_image" :title="item.shop_name" :shop_text="item.shop_text"-->
<!--						:originPrice="item.original_price" :shop_tags="item.shop_tags"-->
<!--						:store_shop_id="item.store_shop_id" :shop_score="item.shop_score"-->
<!--						@click="$Router.push({ path: '/pages/index/GoodsDetails', query: { id: item.id } })">-->
<!--					</sh-goods-card>-->
<!--				</view>-->
<!--			</view>-->
<!--			<view id="u-right-column" class="u-column" style="width: 48%;">-->
<!--				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="item in rightList"-->
<!--					:key="item.id">-->
<!--					<sh-goods-card class="width-100" :detail="item" :type="item.activity_type || ''"-->
<!--						:image="item.shop_image" :title="item.shop_name" :shop_text="item.shop_text"-->
<!--						:originPrice="item.original_price" :shop_tags="item.shop_tags"-->
<!--						:store_shop_id="item.store_shop_id" :shop_score="item.shop_score"-->
<!--						@click="$Router.push({ path: '/pages/index/GoodsDetails', query: { id: item.id } })">-->
<!--					</sh-goods-card>-->
<!--				</view>-->
<!--			</view>-->
      <block v-for="(item,index) in tabsList[0].children" :key="item.id">
        <search-result
            :detail="item"
            @click="$Router.push({ path: '/pages/index/GoodsDetails', query: { id: item.id } })"
        ></search-result>
      </block>
		</view>
		<!-- 惠选页-->
		<view class="u-waterfall u-p-20 " v-if="styleType == 2">
			<view id="u-left-column" class="u-column" style="width: 48%;">
				<view class="goods-item u-m-b-16 u-m-r-16 u-flex u-row-center u-col-center"
					v-for="leftGoods in leftList" :key="leftGoods.id">
					<shopro-goods-card style="width: 100%;" :detail="leftGoods" :type="leftGoods.activity_type || ''"
						:image="leftGoods.image" :title="leftGoods.title" :price="leftGoods.price" :isVip="isVip" :vip_price="leftGoods.vip_price"
						:tag_list="leftGoods.tag_list" :zeng_text="leftGoods.zeng_text"
						:originPrice="leftGoods.original_price" :discount_price="leftGoods.discount_price"
						@click="$Router.push({ path: '/pages/goods/new_detail', query: { id: leftGoods.id } })">
					</shopro-goods-card>
				</view>
			</view>
			<view id="u-right-column" class="u-column" style="width: 48%;">
				<view class="goods-item u-m-b-16 u-flex u-row-center u-col-center" v-for="rightGoods in rightList"
					:key="rightGoods.id">
					<shopro-goods-card style="width: 100%;" :detail="rightGoods" :type="rightGoods.activity_type || ''"
						:image="rightGoods.image" :title="rightGoods.title" :originPrice="rightGoods.original_price"
						:discount_price="rightGoods.discount_price" :price="rightGoods.price" :isVip="isVip" :vip_price="rightGoods.vip_price"
						:tag_list="rightGoods.tag_list" :zeng_text="rightGoods.zeng_text"
						@click="$Router.push({ path: '/pages/goods/new_detail', query: { id: rightGoods.id } })">
					</shopro-goods-card>
				</view>
			</view>
		</view>
		<!--    惠多多-->
		<view class="big-card-wrap u-p-20 " v-if="styleType == 3">
			<block v-for="(item,index) in goodsList" :key="item.id">
				<search-mibao :class="index!='0'?'u-m-t-20':''" :detail="item" :index="index" @click="click">
				</search-mibao>
			</block>
		</view>

		<view class="x-c" style="width: 100%;">
			<!-- 缺省页 -->
			<!--			<shopro-empty v-if="isEmpty" marginTop="200rpx" :image="$IMG_URL + '/imgs/empty/empty_goods.png'" tipText="暂无该商品，还有更多好货等着你噢~"></shopro-empty>-->

			<!-- 更多 -->
			<u-loadmore v-show="!isEmpty" height="80rpx" :status="loadStatus" icon-type="flower" color="#d4d4d4" />
		</view>
	</view>
</template>

<script>
	/**
	 * category-tabs
	 * @description 一个可以吸顶的分类列表
	 * @property {Boolean} enable = false - 是否吸顶,tabbar项中，组件不会自动销毁，需要自行开关
	 * @property {Array} tabsList  - 分类列表
	 * @property {Array | Number} styleType  - 卡片类型
	 */
	let systemInfo = uni.getSystemInfoSync();
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	import shGoodsCard from '../components/sh-goods-card.vue';
	export default {
		components: {
			shGoodsCard
		},
		data() {
			return {
				// 吸顶相关
				fixed: false,
				height: 'auto',
				elClass: this.$u.guid(),
				left: 0,
				width: 'auto',
				stickyTop: 0,
				isSticky: false, //是否吸顶

				// 瀑布流 350-330
				addTime: 100, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],

				tabCur: 0,
				scrollLeft: 0,
				isEmpty: true,
				categoryId: this.tabsList[0]?.id,
				goodsList: [],
				tabCurrent: 0,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				currentPage: 1,
				lastPage: 1,
				styleType: 1,
				isVip:0
			};
		},
		watch: {
			enable(val) {
				if (val == false) {
					this.fixed = false;
					this.disconnectObserver('contentObserver');
				} else {
					this.initObserver();
				}
			},
			'tabsList': {
				immediate: true,
				handler(val) {

					console.log("ns===========", val)
					if (val.length) {
						this.tabChange(0)
					}

				}
			},
		},
		props: {
			tabsList: {
				type: Array,
				default: () => []
			},
			// styleType: {
			// 	type: [String, Number],
			// 	default: 1
			// },
			enable: {
				type: Boolean,
				default: false
			}
		},
		created() {

		},
		mounted() {
			this.initObserver();
			// this.getVip();
			// setTimeout(()=>{
			//   this.tabChange(0)
			//
			// },2000)
			// console.log("=======this.tabsList11",this.tabsList)
		},
		beforeDestroy() {
			this.disconnectObserver('contentObserver');
		},
		methods: {
			getVip() {
				this.$https('user.isVip').then(res => {
					if (res.code === 1) {
						this.isVip = res.data;
					}
				})
			},
			// 瀑布流相关
			async splitData() {
				if (!this.tempList.length) return;
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;
					this.rightList.push(item);
				} else {
					this.leftHeight += 330;
					this.leftList.push(item);
				}
				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},

			// 吸顶相关
			initObserver() {
				if (!this.enable) return;
				// #ifdef APP-PLUS || H5
				this.stickyTop = systemInfo.statusBarHeight + 44;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				let top = systemInfo.statusBarHeight + height;
				this.stickyTop = systemInfo.statusBarHeight + height;
				// #endif
				this.disconnectObserver('contentObserver');

				this.$uGetRect('.' + this.elClass).then(res => {
					this.height = res.height;
					this.left = res.left;
					this.width = res.width;
					this.$nextTick(() => {
						this.observeContent();
					});
				});
			},
			observeContent() {
				this.disconnectObserver('contentObserver');
				const contentObserver = this.createIntersectionObserver({
					thresholds: [0.95, 0.98, 1]
				});
				contentObserver.relativeToViewport({
					top: -this.stickyTop
				});
				contentObserver.observe('.' + this.elClass, res => {
					if (!this.enable) return;
					this.setFixed(res.boundingClientRect.top);
				});
				this.contentObserver = contentObserver;
			},
			setFixed(top) {
				const fixed = top < this.stickyTop;
				if (fixed) {
					this.isSticky = true;
				} else if (this.fixed) {
					this.isSticky = false;
				}
				this.fixed = fixed;
			},
			disconnectObserver(observerName) {
				const observer = this[observerName];
				observer && observer.disconnect();
			},
			// tabs
			tabChange(index) {
				this.tabCur = index;
				this.scrollLeft = (index - 1) * 60;
				this.categoryId = this.tabsList[index].id;
				this.styleType = (index + 1);
				this.clear();
        console.log("==========this.tab",this.tabsList)
				this.goodsList = JSON.parse(JSON.stringify(this.tabsList[index].children));
				this.tempList = JSON.parse(JSON.stringify(this.tabsList[index].children));
				this.splitData();
			},
			click(index) {
				this.$set(this.goodsList[index], 'is_send', 1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.big-card-wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.category-tabs-wrap {
		min-height: 1000rpx;
		margin: 22rpx 22rpx;
		//padding: 10rpx 22rpx;
		background: #ffffff;
		border-radius: 10rpx;

	// 吸顶
		.u-sticky-wrap {
			background-color: #fff;
		}

		// 瀑布流
		.u-waterfall {
			@include vue-flex;
			flex-direction: row;
			align-items: flex-start;
		}

		.u-column {
			@include vue-flex;
			flex: 1;
			flex-direction: column;
			height: auto;
		}
	}

	// 滑动分类
	.tabs-content {
		background: #fff;
		white-space: nowrap;

		.tab-item {
			min-height: 90rpx;
			margin: 30rpx 10rpx 0;
			padding: 0 20rpx;

			.tab-title {
				font-size: 34rpx;
				font-weight: 600;
				color: #666666;
			}

			.title-active {
				color: #333333;
			}

			.tab-des {
				font-size: 60rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
				background: transparent;
				border-radius: 15rpx;
				padding: 2rpx 20rpx;
				margin-top: 10rpx;
			}

			.des-active {
				background: #FC5351;
				border-radius: 15rpx;
				padding: 2rpx 20rpx;
				color: #ffffff;
				margin-top: 10rpx;
			}
		}
	}

	.width-100 {
		width: 100%;
	}
</style>
